
<?php
include("config.php");

mysql_connect($host,$username,$password);
mysql_select_db($database) or die( "Unable to select database");

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	
	<link type="text/css" rel="stylesheet" href="hg.css">
    <title><?php echo $title; ?></title>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <!--[if IE]>

   <style type="text/css">

   .placeDetails {		background-color: #000;top:16px;left:318px;zoom:1;filter: alpha(opacity=65);opacity: 0.65;}
   .popUpForm{   		background-color: #000;width:296px;top:16px;left:20px;padding-top:10px;zoom:1;filter: alpha(opacity=65);opacity: 0.65;}
   .homeGroupDiv{    	background-color: #000;zoom:1;filter: alpha(opacity=70);opacity: 0.7;}
   .homeGroupDiv:hover{ background-color: #A00;zoom:1;filter: alpha(opacity=70);opacity: 0.7;}
   .sendButton{			background-color: #000;zoom:1;filter: alpha(opacity=90);opacity: 0.9;}
   .sendButton:hover{	background-color: #C00;zoom:1;filter: alpha(opacity=70);opacity: 0.7;}
   .closeBtn{			background-color: #000;zoom:1;filter: alpha(opacity=90);opacity: 0.9;}
   .closeBtn:hover{		background-color: #C00;zoom:1;filter: alpha(opacity=70);opacity: 0.7;}
   h4{				color:#000;}
   label {				color:#000;}
   .popUpH3{				color:#000;}
   
    </style>

<![endif]-->
  </head>
  <body>

 
  <div class="column">
    <div id="map-canvas" style="width: 600px; height: 500px"></div>
	<div class="popUpForm">
		<div id="actualForm">
			<div id='popUpClose' class="closeBtn" >x</div>
			<div class="popUpH3"><h3>Please fill in your details, hit "Send" and we'll get in touch with you ASAP</h3></div>
			<label>Name</label><input type="text" id="name" /><br/>
			<label>Cell No.</label><input type="text" id="cell" /><br/>
			<label>Email address</label><input type="text" id="email" /><br/>
			<label>Message</label><br/><textarea id="message" rows="4" onkeyup="limitText('message','cleft')" onblur="limitText('message','cleft')"></textarea><br/>
			<label id="cleft" class="remaining">100</label><label class="remaining"> characters remaining</label><br/>		
			
			
			<div class=errorsDiv">
				<p id="formErrors" class="errors"></p><br/>
			</div>
			<div class="popUpButtons">			
				<div id="submitPopup" class="sendButton" >Send</div>
			</div>
		</div>
		<div id="waiting" style="display: none;">
			<img src="loading.gif" class="loadingGif"/>
		</div>
		<div id="success" style="display: none;">
			<div id='popUpClose' class="closeBtn">x</div>
			<div class="popUpH3">
				<br/><br/><br/><br/><br/><br/>
				<h3 style="font-size:20px; text-align:center;">Thanks! Someone will contact you soon.</h3>
			</div>
		</div>
		<div id="fail" style="display: none;">
			<div id='popUpClose' class="closeBtn">x</div>
			<div class="popUpH3"><br/><br/><br/><br/><br/><br/>
				<h3 style="font-size:20px; text-align:center;">Hmmm, it would appear that didn't work, please try again.</h3>
			</div>
		</div>
		
	</div>
    <?php 
		$query="SELECT * FROM Suburb";
		$result=mysql_query($query);
		while($row = mysql_fetch_array($result))
		{
			$query2 = "SELECT * FROM Homegroup h WHERE h.suburb_id = " . $row['suburb_id'];
			$result2 = mysql_query($query2);
			$num_rows = mysql_num_rows($result2);
			echo "<div class='placeDetails' id='suburb_" . $row['suburb_id'] . "' >";
			echo "<div id='suburbClose' class='closeBtn'>x</div>";
			echo "<h1>" . $row['name'] . "</h1>";
			
			if($num_rows==0)
			{
			
				echo "<h4>There are currently no homegroups in this suburb. Why not try one the neighbouring ones?</h4>";
			}
			else
			{
				echo "<h4>To get in touch with a homegroup, just click on their picture.</h4>";
				echo "<div class='scroller'>";
				
				while($row2 = mysql_fetch_array($result2))
				{
					
					echo "<div class='homeGroupDiv'  title='Click to send them a message' id='".$row2['hg_id']."'>";
					echo "<div class='hgImgDiv'>";
					echo "<img class='hgPic' src='pics/".$row2['pic_link'].".jpg'/>";
					echo "</div>";
					echo "<div class='hgDetailsDiv'>";
					echo "<h3>".$row2['name']."</h3>";
					if($row2['day']!="")
					{
						echo "<p>Meet on ".$row2['day']."s"; 
						if($row2['time']!="")
							echo " at ".$row2['time']."</p>";
					}
					echo "</div></div>";					
				}
				echo "</div>";
			}
			echo "</div>";
		}
	?>
     
  </div>
  <p class="browserText">This page is best viewed with <a href="http://www.google.com/chrome/">Google Chrome</a> or <a href="http://www.getfirefox.net/">Mozilla Firefox</a></p>
    <script type="text/javascript">
	var suburbs=[
	 <?php
		$query="SELECT * FROM Suburb";
		$result=mysql_query($query);
		while($row = mysql_fetch_array($result))
		{
			echo "{\"title\":\"" . $row['name'] . "\",\"id\":\"" . $row['suburb_id'] . "\",\"path\":" . $row['coords'] . "},";
		}
	?>
  ];
  var currentHG=null;
  var map;
var currentPlace = null; 
var suburbArray = new Array();
     function initialize() {
	  
  var mapDiv = document.getElementById('map-canvas');
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(-33.984, 18.455),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  
  $(suburbs).each(function() {  
  
	var thisSuburb = this;  
	var suburb = new google.maps.Polygon({	
		title:thisSuburb.title,
		paths:thisSuburb.path,
		strokeColor: '#ff0000',
		strokeOpacity: 0.8,
		strokeWeight: 2,
		fillColor: '#ff0000',
		fillOpacity: 0.35,
		map: map
		});
		suburbArray.push(suburb);
		
		google.maps.event.addListener(suburb, 'click', function() {  		  
			if (currentPlace == suburb) {  
				
				$("#suburb_"+thisSuburb.id).slideUp();  
				currentPlace = null;  
				suburb.fillOpacity=0.35;
				suburb.setMap(map);
			} else { 
				if(currentPlace!=null)
				{
					$('.placeDetails').each(function(index) {
						if($(this).is(':visible'))
						{
							$(this).slideUp(function(){
								$("#suburb_"+thisSuburb.id).slideDown();
							});
						}
					});
				}
				else
				{
					$("#suburb_"+thisSuburb.id).slideDown();
				}
				
				for(i=0;i<suburbArray.length;i++)
				{
					if(suburbArray[i].fillOpacity==0.75)
					{
						suburbArray[i].fillOpacity=0.35;
						suburbArray[i].setMap(map);
					}
				}
			  
			  suburb.fillOpacity=0.75;
			  suburb.setMap(map);
			  currentPlace = suburb;  
			}  
		});
	
	google.maps.event.addListener(suburb,'mouseover',function(){
		if(currentPlace!=suburb)
		{
			suburb.fillOpacity=0.6;
			suburb.setMap(map);
		}
	});
	
	google.maps.event.addListener(suburb,'mouseout',function(){
		if(currentPlace!=suburb)
		{
			suburb.fillOpacity=0.35;
			suburb.setMap(map);
		}
	});
});
  
	   map.maxZoom=15;
       map.minZoom=10;
       map.streetViewControl=0;
     
     // Add a move listener to restrict the bounds range
      google.maps.event.addListener(map, "center_changed", function() {
        // The allowed region which the whole map must be within
      var allowedBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-34.3594,18.3191), new google.maps.LatLng(-33.8483,18.6780));
      
      // If the map position is out of range, move it back
      
        // Perform the check and return if OK
        if (allowedBounds.contains(map.getCenter())) {
          return;
        }
        
        // It`s not OK, so find the nearest allowed point and move there
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}
        
        map.setCenter(new google.maps.LatLng(Y,X));
      
      });      

}
      

      google.maps.event.addDomListener(window, 'load', initialize);
	  
	  $(".homeGroupDiv").click(function(){
		if($(".popUpForm").is(':visible'))
		{
			$("#waiting").hide();
			$("#success").hide();
			$("#fail").hide();
			$("#actualForm").show();
			$(".popUpForm").hide();			
			$("#formErrors").html("");
			limitText('message','cleft');
		}
		$(".popUpForm").slideDown();
		currentHG=$(this).attr("id");
	  });
	  
	function limitText(AId,BId)
	{
		var e1 = document.getElementById(AId);
		var e2 = document.getElementById(BId);
		var l1 = e1.value.length;
		(l1 > 100)?e1.value = e1.value.substring(0,100):e2.innerHTML = 100 - l1 
	}
	
	
	$(".closeBtn").click(function(){
		if($(this).attr("id")=="suburbClose")
		{
			$('.placeDetails').each(function(index) {
				if($(this).is(':visible'))
				{
					$(this).slideUp();
				}
			});
			currentPlace = null;  
			for(i=0;i<suburbArray.length;i++)
			{
				if(suburbArray[i].fillOpacity==0.75)
				{
					suburbArray[i].fillOpacity=0.35;
					suburbArray[i].setMap(map);
				}
			}
		}
		else
		{
			$("#waiting").hide();
			$("#success").hide();
			$("#fail").hide();
			$("#actualForm").show();
			$(".popUpForm").slideUp();
			$("#name").val("");
			$("#cell").val("");
			$("#email").val("");
			$("#message").val("");
			$("#formErrors").html("");
			limitText('message','cleft');
		}
	});
	
	$("#submitPopup").click(function(){
		$errors="";
		if($("#name").val()=="")
			$errors="Please enter your name.<br/>";
		if($("#cell").val()=="" && $("#email").val()=="")
			$errors+="Please enter either an email address or cell phone number.<br/>";
			
		if($errors!="")
		{
			$("#formErrors").html($errors);
		}
		else
		{
			$("#actualForm").hide();
			$("#waiting").fadeIn();
			$hg_id=currentHG;
			$name=$("#name").val();
			$cell=$("#cell").val();
			$email=$("#email").val();
			$message=$("#message").val();
			$.ajax({
				type: "POST",
				url: "hgSubmit.php",
				data: ({hg_id : $hg_id,name:$name,cell:$cell,email:$email,message:$message}),
				dataType: "json",
				success: function(data) {
					$("#waiting").hide();
					if(data.success==1)
					{
						
						$("#success").fadeIn();
					}
					else
					{
						
						$("#fail").fadeIn();
					}
				}});
		}
	});
    </script>
  </body>
</html>